<template>
  <div class="datas-wrap">
    <dataspart :datas="datas" @datas:refresh="load" @datas:ops="doOps"></dataspart>
    <datasops v-if="showOps"></datasops>
  </div>
</template>

<script>
  import DatasApi from '@/api/datas';
  import Queue from '@/ui/common/mixins/queue';
  import Dataspart from "./dataspart";
  import Datasops from "./datasops";

  export default {
	name: "datastop",
	components: {Datasops, Dataspart},
	mixins: [Queue],
	data() {
	  return {
		datas: [],
		timer: null,
	  }
	},
	mounted() {
	  this.load();
	},
	computed: {
	  showOps: function () {
		var showOps = false;
		if (this.datas) {
		  for (var i = 0; i < this.datas.length; i++) {
			if (this.datas[i].sel) {
			  showOps = true;
			  break;
			}
		  }
		}
		return showOps;
	  }
	},
	methods: {
	  load: function () {
		this.__task_add(() => this.load_task());
	  },
	  delay_load_task: function () {
		if (this.timer == null) {
		  this.timer = setTimeout(() => {
			this.__task_add(() => this.load_task())
		  }, 15000);
		}
	  },
	  load_task: function () {
		return new Promise((resolve, reject) => {
		  DatasApi.page().then(res => {
			this.setResult(res.obj.data);
			resolve();
		  }, () => {
			this.setResult();
			resolve();
		  }).catch(() => {
			this.setResult();
			resolve();
		  });
		});
	  },
	  setResult: function (obj) {
		var _datas = obj || this.datas;
		if (_datas && this.datas) {
		  for (var i = 0; i < _datas.length; i++) {
			for (var j = 0; j < this.datas.length; j++) {
			  if (_datas[i] && this.datas[j] && _datas[i].id == this.datas[j].id) {
				_datas[i].sel = this.datas[j].sel || false;
				break;
			  }
			}
		  }
		}
		this.datas = _datas;
		this.timer = null;
		this.delay_load_task();
	  },
	  doOps: function () {

	  }
	},
	destroyed() {
	  if (this.timer != null) {
		clearTimeout(this.timer);
	  }
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../ui/common/stylus/variable.styl"
</style>